<script lang="ts" setup>
import { AuthorDetail } from "@/typing";
import { useRouter } from "vue-router";
import 'vant/es/toast/style';
import { Toast } from "vant";
import { ref, toRefs, watch } from "vue";
import { storeToRefs } from "pinia";
import { localStoriesStore, userLocalStoriesStore } from "../../store";

const router = useRouter();

const localStore = localStoriesStore();
const { refreshAuthorCollectStore, selectAuthorCollectId } = localStore;

const userStore = userLocalStoriesStore();
const { isLogin } = storeToRefs(userStore);
const { getMyUserStatus } = userStore;

const props = defineProps<{
    type: number,
    list: AuthorDetail
}>()

const { type, list } = toRefs(props)
isLogin.value = getMyUserStatus();

let toggleCollect = ref<boolean>(false);
let collect = ref<string>();
let collectCss = ref<string>();
let isCollect = ref<boolean>();
isCollect.value = selectAuthorCollectId(list.value.user_id);

// 观察list的改变，而改变样式
watch(list, (newVal) => {
    isCollect.value = selectAuthorCollectId(newVal.user_id);

    if (isCollect.value) {
        collectFunc(isCollect.value);
        collect.value = '已关注';
    } else {
        collectFunc(!isCollect.value);
        collect.value = '关注';
    }
})

watch(() => isLogin.value, () => {
    isCollectShow(isLogin.value)
})

isCollectShow(isLogin.value)

// 是否已关注
function isCollectShow(isLogin: boolean) {
    if (!isLogin) {
        collectFunc(true)
        collect.value = '关注';
    } else {
        if (isCollect.value) {
            collectFunc(false)
            collect.value = '已关注';
        }
        else {
            collectFunc(true)
            collect.value = '关注';
        }
    }
}

// 点击切换
function updateCollect() {
    if (!isLogin.value) {
        router.push({
            name: 'login',
        })
    } else {
        if (toggleCollect.value) {
            collectFunc(true)
            refreshAuthorCollectStore(list.value);
            collect.value = '关注';
            Toast('取消关注');
        }
        else {
            collectFunc(false)
            refreshAuthorCollectStore(list.value);
            collect.value = '已关注';
            Toast('关注成功');
        }
    }
}

// 按钮的样式
function collectFunc(val: boolean) {
    if (val) {
        toggleCollect.value = false;
        if (type.value == 0) {
            collectCss.value = 'focus-one '
        }
        else {
            collectCss.value = 'focus-two '
        }
    } else {
        toggleCollect.value = true;
        if (type.value == 0) {
            collectCss.value = 'focus-one-active'
        }
        else {
            collectCss.value = 'focus-two-active '
        }
    }
}
</script>

<template>
    <div>
        <div v-if="(type == 0)" @click="updateCollect" class="py-2 rounded-full" :class="collectCss">
            {{ collect || '关注' }}
        </div>
        <div v-if="(type == 1)" @click="updateCollect" class="py-3 px-5 w-24 mt-8 mb-3 ml-64 w-3/12 border rounded-lg"
            :class="collectCss">{{ collect || '关注' }}</div>
    </div>
</template>

<style>
.focus-one {
    border: 1px solid black;
    color: black;
    animation: animate .5s ease-in;
}

.focus-one-active {
    border: 1px solid gray;
    color: gray;
    animation: move .3s linear;
}

.active-two {
    border: 1px solid black;
    color: black;
    background-color: white;
    animation: animate .5s ease-in;
}

.focus-two-active {
    border: 1px solid gray;
    background-color: rgb(220, 220, 220);
    color: gray;
    animation: move .3s linear;
}

@keyframes move {
    from {
        transform: scaleX(1);
    }

    25% {
        transform: scaleX(0.7);
    }

    50% {
        transform: scaleX(0.5);
    }

    75% {
        transform: scaleX(0.7);
    }

    100% {
        transform: scaleX(1);
    }
}

@keyframes animate {
    from {
        transform: scaleX(1);
    }

    25% {
        transform: scaleX(0.7);
    }

    50% {
        transform: scaleX(0.5);
    }

    75% {
        transform: scaleX(0.7);
    }

    100% {
        transform: scaleX(1);
    }
}
</style>
